<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>

<body>


    <script>

        // Cat  
        //      name (属性)         汤姆
        //      color  (属性)         蓝色
        //      catch（方法）      穿蓝色衣服的汤姆正在抓老鼠
        // 构造函数
        function Cat() {// 函数作用域的this是谁?
            // 添加属性
            this.name = "汤姆";
            this.color = "蓝色";
            // 添加方法
            this.catch = function(){
                console.log("穿"+this.color+"衣服的"+this.name+"正在抓老鼠");
            }
        }
        // 定义变量tom,记录Cat构造函数创建的实例对象
        var tom = new Cat();
        // 实例对象可以使用构造函数的属性和方法
        console.log(tom);
        console.log(tom.name);// "汤姆"
        console.log(tom.color);// "蓝色"
        // console.log(tom.catch);// 把catch方法打印而已
        // console.log(tom.catch());// undefined
        tom.catch();


        console.log("=======================");
        //  Mouse
        //       name (属性)         杰瑞
        //       color  (属性)       棕色
        //       run   （方法）      穿棕色衣服的杰瑞正在逃跑
        // 构造函数
        function Mouse() {
            // 添加属性
            this.name= "杰瑞";
            this.color = "棕色";
            // 添加方法
            this.run = function(){
                console.log("穿"+this.color+"衣服的"+this.name+"正在逃跑");
            }
        }
        // 定义变量jerry,记录Mouse构造函数创建的实例对象
        var jerry = new Mouse();
        console.log(jerry);
        console.log(jerry.name);
        console.log(jerry.color);
        jerry.run();




        // 总结:
            // 所谓构造函数,就是通过new操作符来调用的函数
            // 可以自动返回一个数据集合,这个数据集合我们叫做实例对象
            // 这个数据集合的属性和方法就可以被实例对象使用
            // 关键是理解 this,(看函数作用域和调用者)
            // 在JS世界当中,
            // 只要它是个(空)对象,我们就可以往这个对象添加属性和方法.



    </script>
</body>

</html>